<template>
    <div class="page flex unified-flex-align unified-flex-center">
        <div class="bind flex unified-flex-center">

            <p class="binded-title">修改登录密码</p>

            <div>
                <el-input v-model="password" placeholder="请输入原密码"></el-input>
            </div>

            <div>
                <el-input v-model="new_password" placeholder="请输入新密码"></el-input>
            </div>

            <div>
                <el-input v-model="again_password" placeholder="请再次输入新密码"></el-input>
            </div>

            <div>
                <el-button type="primary" @click="clickSumbit">提交修改
                </el-button>
            </div>


        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'

    export default {
        computed: {

            ...mapState(['editUserInfo'])

        },
        data() {
            return {
                api:this.$api.user,
                // 原登录密码
                password: "",
                // 新的登录密码
                new_password: "",
                // 再次确认登录密码
                again_password: ""
            }
        },
        methods: {

            clickSumbit() {


                if (!this.password) {

                    this.$message.error("请输入登录密码")

                } else if (!this.new_password || !this.again_password) {
                    this.$message.error("请再次输入登录密码")
                } else if (this.again_password != this.new_password) {
                    this.$message.error("两次输入密码不一致")
                } else if (this.new_password == this.password) {
                    this.$message.error("新密码和旧密码一致")
                } else {


                    this.$axios({
                        url: this.api,
                        method: "POST",
                        data: {
                            action: "editPassword",
                            params: {
                                user: this.editUserInfo._id,
                                password: this.password, // 原登录密码密码
                                newpassword: this.new_password // 新的登录密码
                            }
                        }
                    }).then(res => {
                        if(res.data.code==0){
                            this.$message.success(res.data.msg)
                            this.password = ""
                            this.new_password = ""
                            this.again_password = ""
                        }else{
                            this.$message.error(res.data.msg)
                        }
                    })


                }


            }


        }

    }
</script>

<style scoped="scoped">
    .bind {
        width: 60%;
        height: 70%;
        flex-direction: column;
        box-sizing: border-box;
        text-align: center;
        justify-content: space-around;
    }

    .bind /deep/ .el-input {
        width: 100%;
    }

    .binded-title {
        font-size: 20px;
        font-weight: bold;
    }
</style>
